<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
     <input type="text">
     <div id="app"></div>
    <script>
        // let sun = {}
        // console.log(sun.name);
        // sun.name = "zs"
        function observe(target) {
            const div = document.getElementById("app")
            
            const proxy = new Proxy(target,{
                 get(target, prop) {
                        return target[prop]
                    },
                    set(target,prop,value) {
                        target[prop] = value
                        render()
                    }
            })

            //将数据渲染到浏览器
            function render() {
                let html = ""
                for (const item of Object.keys(target)) {
                    html += `<p>${item} ----- ${target[item]}</p >`
                }
                div.innerHTML = html
            }
            render()

                return proxy
        }
        let data = {
            title: "Vue",
            desc: "描述信息"
        }
        let obj = observe(data)
        document.querySelector('input').onkeyup = function () {
            obj.title = this.value
        }
    </script>
</body>

</html>